<template>
  <div class="hm-comment">
    <!-- 这是黑马评论组件 --- {{ comment.content }} -->
    <!-- 标题 -->
    <div class="title">
      <!-- 所谓的基础路径的拼接, 是在进行字符串的处理, 可以封装到过滤器中 -->
      <img :src="comment.user.head_img | fixUrl" alt="">
      <div class="info">
        <div class="name">{{ comment.user.nickname }}</div>
        <div class="time">{{ comment.create_date | time('YYYY-MM-DD HH:mm:ss') }}</div>
      </div>
      <div class="reply" @click="reply(comment.id,comment.user.nickname)">回复</div>
    </div>

    <!--专门递归显示父评论的 -->
    <hm-floor @reply="reply" :index="index" v-if="comment.parent" :comment="comment.parent"></hm-floor>

    <!-- 放内容 -->
    <div class="content">{{ comment.content }}</div>
  </div>
</template>

<script>
import HmFloor from 'components/hm-floor.vue'

export default {
  data () {
    return {
      index: 0
    }
  },
  props: {
    comment: {
      type: Object,
      required: true
    }
  },
  components: {
    HmFloor
  },
  created () {
    let obj = this.comment
    while (obj.parent) {
      this.index++
      obj = obj.parent
    }
  },
  methods: {
    reply (id, nickname) {
      this.$emit('reply', id, nickname)
    }
  }
}
</script>

<style lang="scss" scoped>
.hm-comment {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  .title {
    display: flex;
    img {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .info {
      flex: 1;
      .name {
        font-size: 14px;
      }
      .time {
        color: #888;
      }
    }
  }
  .content {
    padding: 10px 0;
    font-size: 14px;
  }
  .hm-floor {
    border: 1px solid #ccc;
    border-bottom: none;
    margin-top: 10px;
  }
}
</style>
